import { useEffect, useState } from "react";
import { Tooltip, Row, Col} from 'antd';
import VirtualList from 'rc-virtual-list';

import {getRiskData} from "../config";

import styles from "../styles/riskStatus.module.css";

const ContainerHeight = 320;

const RiskStatue = () => {
  const [data, setData] = useState([]);
  
  const appendData = () => {
    setData(data.concat(getRiskData()));
  };

  const onScroll = (e) => {
    if (e.currentTarget.scrollHeight - e.currentTarget.scrollTop <= ContainerHeight + 140) {
      console.log(e.currentTarget.scrollHeight - e.currentTarget.scrollTop);
      appendData();
    }
  };

  const listProps = {
    data: data,
    height: ContainerHeight,
    itemHeight: 47,
    itemKey: 'id',
    onScroll: onScroll,
  }

  useEffect(() => {
    appendData();
  }, []);

  return (
    <div className={styles.riskStatus}>
      <div className={styles.header}>
        <Row gutter={16}>
          <Col span={10}>归属机构</Col>
          <Col span={7}>出险次数</Col>
          <Col span={7}>估损金额</Col>
        </Row>
      </div>
      <VirtualList {...listProps}>
        {(item) => (
          <Tooltip title={item.money}>
            <Row className={styles.listItem} gutter={16}>
              <Col className={styles.listItemName} span={10}>{item.unitName}</Col>
              <Col className={styles.listItemCount} span={7}>{item.riskCount}(次)</Col>
              <Col className={styles.listItemMoney} span={7}>￥{item.money}</Col>
            </Row>
          </Tooltip>
        )}
      </VirtualList>
    </div>
  );
};

export default RiskStatue;
